<template>
  <el-dialog title="新增菜品" :visible.sync="kaiguan">
  <el-form :model="form">
    <el-form-item label="菜品名称" :label-width="formLabelWidth">
      <el-input v-model="form.food_name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="菜品价格" :label-width="formLabelWidth">
      <el-input v-model="form.food_price" autocomplete="off"></el-input>
    </el-form-item>



<el-upload
ref="shangchuan"
  action
  :auto-upload='false'
  list-type="picture-card"
  :http-request="updateData"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>



    <el-form-item label="菜品类型" :label-width="formLabelWidth">
      <el-select v-model="form.food_type" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="update">确 定</el-button>
  </div>
</el-dialog>

</template>

<script>
import * as api from '../utils/api'
export default {
    props:['kaiguan'],
data() {
      return {
     form: {
        food_name: "",
        food_price: "",
        food_type: "",
      },
        formLabelWidth: '120px',
         imageUrl: '',
          dialogVisible: false,
          dialogImageUrl:''
      };
    },
     methods: {
handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      updateData(content){
          let myfromData = new FormData()
          myfromData.append('uploadImg',content.file)
          myfromData.append('food_name',this.form.food_name)
          myfromData.append('food_price',this.form.food_price)
          myfromData.append('food_type',this.food_type)
             this.axios({
        method: "post",
        url: api.DJLADDFOOD,
        data: myfromData,
      })
        .then((data) => {
      
          if (data.data.code === 200) {
            console.log(data.data)
            this.$message({
              message: "添加成功",
              type: "success",
            });
            //上传成功应该重新调用加载新数据的方法
          } else {
            this.$message({
              message: "添加失败，请稍后重试",
              type: "warning",
            });
          }
          this.$emit('insClose')
        })
        .catch((err) => {
          console.log(err);
          this.$emit('insClose')
        });
      },
      update(){
          this.$refs.shangchuan.submit()
      }
    
     }
}
</script>

<style>

</style>